<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">管理收货地址</text>
      <button class="btn" @click="goToAddAddress">新建</button>
    </view>

    <!-- 地址列表 -->
    <view class="address-list">
      <view 
        class="address-item" 
        v-for="(item, index) in addressList" 
        :key="index"
        @click="changeAddress(item)"
      >
        <view class="name-phone">
          <text class="name">{{item.name}}</text>
          <text class="phone">{{item.phone}}</text>
        </view>
        <view class="address-detail">
          {{item.city}}{{item.department}}{{item.houseNumber}}
        </view>
        <view class="actions">
          <text class="edit-btn" @click.stop="editAddress(item)">编辑</text>
          <text class="delete-btn" @click.stop="confirmDelete(item)">删除</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
<<<<<<< HEAD
	import config from '../../config';
=======
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
export default {
  data() {
    return {
      addressList: []
    }
  },
  onLoad() {
    this.fetchAddressList();
  },
  onShow() {
    // 从编辑页面返回时刷新列表
    this.fetchAddressList();
  },
  methods: {
    // changeAddress(item) {
    //   console.log('切换地址:', item);
    //   uni.setStorage({
    //       key: 'address',
    //       data: item.city+item.department+item.houseNumber,
    //       success: function () {
    //           console.log('数据存储成功');
    //       },
    //       fail: function (err) {
    //           console.log('数据存储失败', err);
    //       },
    //       complete: function () {
    //           console.log('操作结束');
    //       }
    //   });
    //   uni.setStorage({
    //       key: 'name',
    //       data: item.name,
    //       success: function () {
    //           console.log('数据存储成功');
    //       },
    //       fail: function (err) {
    //           console.log('数据存储失败', err);
    //       },
    //       complete: function () {
    //           console.log('操作结束');
    //       }
    //   });
    //   uni.setStorage({
    //       key: 'phone',
    //       data: item.phone,
    //       success: function () {
    //           console.log('数据存储成功');
    //       },
    //       fail: function (err) {
    //           console.log('数据存储失败', err);
    //       },
    //       complete: function () {
    //           console.log('操作结束');
    //       }
    //   });








    // },
    // 获取地址列表
    async fetchAddressList() {
      try {
        uni.showLoading({ title: '加载中...' });
        const response = await uni.request({
<<<<<<< HEAD
          url: config.URL+'/address',
=======
          url: 'https://67f78cbf7719dfcd4b4774b8.hz-iframe-svc.simplelab.cn/address',
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
          method: 'GET'
        });
        if (response.statusCode === 200) {
          // 这里确保response.data是数组类型
          if (Array.isArray(response.data)) {
            this.addressList = response.data;
          } else {
            console.error('返回的数据不是数组类型');
            this.addressList = [];
          }
        } else {
          throw new Error(`获取地址失败: ${response.statusCode}`);
        }
      } catch (error) {
        console.error('获取地址错误:', error);
        uni.showToast({
          title: error.message || '获取地址失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 跳转到添加地址页面
    goToAddAddress() {
      uni.navigateTo({
        url: '/pages/addAddress/index'
      });
    },

    // 编辑地址
    editAddress(item) {
      uni.navigateTo({
        url: `/pages/upsertAddress/index?id=${item.id}`
      });
    },

    // 确认删除
    confirmDelete(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该地址吗？',
        success: async (res) => {
          if (res.confirm) {
            await this.deleteAddress(item);
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },

    // 删除地址
    async deleteAddress(item) {
      try {
        uni.showLoading({ title: '删除中...' });
        const response = await uni.request({
<<<<<<< HEAD
          url: config.URL+`/address/${item.id}`,
=======
          url: `https://67f78cbf7719dfcd4b4774b8.hz-iframe-svc.simplelab.cn/address/${item.id}`,
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
          method: 'DELETE'
        });
        if (response.statusCode === 200) {
          uni.showToast({ title: '删除成功', icon: 'success' });
          this.fetchAddressList(); // 刷新地址列表
        } else {
          throw new Error(`删除地址失败: ${response.statusCode}`);
        }
      } catch (error) {
        console.error('删除地址错误:', error);
        uni.showToast({
          title: error.message || '删除失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #eaf2f8;
}

.container {
  padding: 30px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-bottom: 30px;
  animation: fadeInDown 0.5s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #444;
}

.btn {
  background-color: #00a2ff;
  color: white;
  border: none;
  width: 120px;

  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0087e6;
}

.address-list {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 600px;
  animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.address-item {
  padding: 20px;
  border-bottom: 1px solid #d3e1ec;
  position: relative;
  transition: background-color 0.3s ease;
}

.address-item:last-child {
  border-bottom: none;
}

.address-item:hover {
  background-color: #f5f9fd;
}

.name-phone {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.name {
  font-weight: 600;
  font-size: 18px;
  color: #333;
}

.phone {
  color: #666;
  font-size: 16px;
}

.address-detail {
  color: #666;
  line-height: 1.6;
  font-size: 16px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.edit-btn {
  color: #00a2ff;
  text-decoration: none;
  margin-left: 10px;
  display: inline-block;
  font-size: 16px;
  transition: color 0.3s ease;
}
.delete-btn{
    color:red
}
.edit-btn:hover, .delete-btn:hover {
  color: #0087e6;
}

.edit-btn {
  margin-right: 10px;
}
</style>
